﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        div {
            border: 1px solid black;
            margin: 10px;
        }
        /*子选择器选择直接后代*/
        #nav > li {
            background: url("imge_file.png") no-repeat left top;
            padding-left: 20px;
        }
        /*相邻选择器*/
        h2 + p {
            font-size: 1.4em;
            font-weight: bold;
            color: #777;
        }

        /*属性选择器(具有某种属性)*/
        #attrSelector span[title] {
            background-color: red;
        }

        #attrSelector span[title]:hover {
            cursor: help;
        }
        /*属性选择器(属性值过滤,如果是多个属性中匹配一个需要使用~符号)*/
        #attrSelector a[rel ~="search"] {
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <h2>子选择器</h2>
        <ul id="nav">
            <li>Home</li>
            <li>Service</li>
            <li>
                <ul>
                    <li>Design</li>
                    <li>Development</li>
                    <li>consultancy</li>
                </ul>
            </li>
            <li>Contact Us</li>
        </ul>
    </div>


    <div>
        <h2>相邻选择器</h2>
        <p>这是第一个段落， 用h2的相邻选择器可以选择的到</p>
        <p>这是第二个段落， 用h2的相邻选择器选择不到</p>
    </div>

    <div id="attrSelector">
        <h2>属性选择器</h2>
        <p>属性选择器，可以选择<span title="这种选择器很好用">具有某个属性的</span>元素</p>

        <ul>
            <li><a href="http://www.baidu.com" target="_blank" rel="tieba search">百度</a></li>
            <li><a href="http://www.qq.com" target="_blank" rel="frend">qq</a></li>
            <li><a href="http://www.zhihu.com" target="_blank" rel="search">知乎</a></li>
        </ul>
    </div>
</body>
</html>
